<template>
	<div id="all-User">

		<div id="show-User">
			<div class="search-user">
				<div style="width: 50%;">
					<el-input type="text" class="search" v-model="searchUser" placeholder="根据用户名查询用户"></el-input>

				</div>

				<el-button @click="addUser" type="primary" class="button-add" plain>添加用户</el-button>

			</div>
			<div class='table-user'>
				<template>
					<el-table :data="pageUser" border style="width: 90%; min-width:760px;">
						<el-table-column prop="username" label="用户名" width="160">
						</el-table-column>
						<el-table-column prop="name" label="昵称" width="120">
						</el-table-column>
						<el-table-column prop="level" label="身份" width="120">
							<template slot-scope="scope">
								<p>{{scope.row.level |level}}</p>
							</template>
						</el-table-column>
						<el-table-column label="性别" width="100">
							<template slot-scope="scope">
								<p>{{scope.row.sex |sex}}</p>
							</template>
						</el-table-column>


						<el-table-column label="操作" min-width="160">
							<template slot-scope="scope">
								<el-button @click="checkUser(scope.row.id)" type="primary" size="small">查看</el-button>
								<el-button @click="sendNotice(scope.row.username)" type="info" size="small">发送消息</el-button>

								<el-button @click="deleteUser(scope.row.id)" type="warning" size="small">删除</el-button>

							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>

			<div class="table-footer">

				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
				 :page-sizes="page.sizes" :page-size="pageSize" layout="sizes, prev, pager, next" :total="total">
				</el-pagination>

			</div>
		</div>
		<div class="addUser" ref="addUser" style="display: none;">
			<h2 style="font-size: 28px; margin-top: 24px;">添加用户</h2>
			<div class="r_input">
				<label for="username_r">用户名:</label>
				<input type="text" id="username_r" name="username" @blur="username_r" v-model="username.username" />
				<p v-cloak :style="span_style.username">{{info.username}}</p>
			</div>
			<div class="r_input"> <label for="password_r">输入密码:</label>
				<input type="text" name="password" id="password_r" v-model="r.password" @blur="password" />
			</div>
			<div class="r_input"><label for="question">出生年月:</label>
				<input type="date" name="answer" id="question" v-model="r.answer" @blur="brith"/>
			</div>
			<div class="close">
				<a href="" style="line-height: 22px;" @click.prevent="close">×</a>
			</div>
			<el-button type="primary" class="r_sumbit" style="transform: translateX(20%);" @click.prevent="addUser_on">确定</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {}, // 保存着用户的信息
				showUser: [], //显示的用户
				pageUser: [],
				searchUser: '',
				page: {
					sizes: [5, 7], //数量下拉框
				},
				pageSize: 5, //每页显示的数量
				total: 20, //总数量
				currentPage: 1,
				username: {
					username:''
				},
				span_style: {
					username: 'color:#2c3e50',
					password: 'color:#2c3e50',
					answer: 'color:#2c3e50',
					password2: 'color:red'
				},
				info: {},
				r: {},
				sure:{
					input1:false,
					input2:false,
					input3:false
				},
			}
		},
		watch: {
			searchUser: function(newVal) {
				let regx = new RegExp(newVal);
				if (newVal == '') {
					this.showUser = [];
					for (let i in this.user) {
						this.showUser.push(this.user[i]);
					}
					this.total = this.showUser.length;
				} else {
					this.showUser = this.user.filter(x => {
						return regx.test(x.username);
					})
					this.total = this.showUser.length;
				}
				this.pageChange();

			}
		},
		filters: {
			level: (value) => {
				if (value == 0) {
					return "用户"
				}
				if (value == 1) {
					return "管理员"
				}
			},
			sex: (value) => {
				if (value == 0 || value == '女') {
					return "女"
				} else if (value == 1 || value == '男') {
					return "男"
				} else {
					return '未知'
				}
			}
		},
		methods: {
			sendNotice(username) {
				this.$router.push({
					path: '/main/manager/announce',
					query: {
						user: username
					}
				})
			},
			checkUser(id) {
				this.$router.push({
					path: '/main/manager/userInfo',
					query: {
						user_id: id
					}
				})
			},
			deleteUser(id) {
				let flag = confirm("是否删除")
				if (flag) {
					this.$axios.post('/api/admin/deleteUser', {
							id: id
						})
						.then(data => {
							if (data.status == 200) {

								this.getAllUser();
							}
						})
						.catch(err => {

						})
				}

			},
			getAllUser() {

				this.$axios.get('/api/admin/allUserInfo')
					.then((data) => {
						if (data.status == 200) {
							this.total = data.data.length;

							this.user = data.data;
							this.user.sort(function(a,b){
								return b.level - a.level 
							})
						}
						this.showUser = [];
						for (let i in this.user) {
							this.showUser.push(this.user[i]);

						}
						this.pageChange();

					})
					.catch((err) => {
						console.log(err)
					})
			},
			pageChange() {
				this.pageUser.length = 0;
				let min = (this.currentPage - 1) * this.pageSize;
				let max;
				if (min + this.pageSize < this.total) {

					max = min + this.pageSize;

				} else {
					max = this.total;
				}
				for (let i = 0; i + min < max; i++) {
					let j = min + i;
					this.pageUser.splice(i, 1, this.showUser[j])
				}

			},
			handleSizeChange(size) {
				this.pageSize = size;
				this.currentPage = 1

				this.pageChange();
				this.currentPage = 1;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				this.pageChange();
			},
			addUser() {
				let className=  this.$refs.addUser.style;
				className.display = ''	
			},
			close(){
				let className=  this.$refs.addUser.style;
				className.display = 'none';
			},
			username_r() {
				if (this.username.username.length >= 6) {
					this.$axios.post('/api/user/username', {
							username: this.username
						}.username, {
							emulateJSON: true
						})
						.then((data) => {
							if (data.data.length != 0) {
								this.info.username = "用户名已存在";
								this.span_style.username = 'color:red';
								this.sure.input1 = false;
							} else {
								this.info.username = '✔';
								this.span_style.username = 'color:green';
								this.r.username = this.username.username;
								this.sure.input1 = true;
							}
						})
						.catch((err) => {
							console.log(err);
						})

				} else {
					this.info.username = '用户名不能小于6位';
					this.span_style.username = 'color:red';
					this.sure.input1 = false;
				}

			},
			brith(){
				if (this.r.answer !== '')
					this.sure.input3 = true;
				else
					this.sure.input3 = false;
			},
			password(){
				if(this.r.password != ''){
					this.sure.input3 = true;
				}
				else{
					this.sure.input3 = false;
				}
			},
			addUser_on() {
				this.$axios.post('/api/admin/addUser',this.r)
				.then(data=>{
					if(data.status == 200){
						alert('添加成功');
						this.close();
						this.username = {};
						this.r = {};
						this.getAllUser();
						
					}
				})
				.catch(err=>{
					console.log(err)
				})
			}
		},
		created() {
			this.getAllUser();
		}
	}
</script>

<style lang="less" scoped>
	#all-User {
		margin-top: 50px;
		margin-left: 50px;
		width: 90%;
		position: relative;

		.addUser {
			
			position: absolute;
			top: 0;
			left: 120px;
			width: 450px;
			height: 450px;
			border: 1px solid #ccc;
			background: white;
			z-index: 22;

			.close {
				width: 100%;
				height: 22px;
				text-align: right;
				position: absolute;
				top: 0;
				right: 0;
				background-color: #efefef;

				a {
					color: red;
					font-size: 30px;
				}
			}

			.r_sumbit {
				position: absolute;
				top: 300px;
				left: 180px;
			}

			.r_input {
				width: 400px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				&:nth-child(1) {
					top: 20px;
				}

				&:nth-child(2) {
					top: 100px;
				}

				&:nth-child(3) {
					top: 160px;
				}

				&:nth-child(4) {
					top: 220px;
				}


				/*no*/
				label {
					display: inline-block;
					width: 100px;
					/*no*/
					text-align: left;
					font-size: 16px;
					/*no*/
					height: 30px;
					/*no*/

				}

				input {

					width: 200px;
					height: 30px;
					font-size: 20px;
					border: 1px solid #ccc;
					line-height: 30px;

				}

				p {
					height: 16px;
					/*no*/
				}
			}

		}

		#show-User {
			.search-user {
				display: flex;
				height: 50px;
				line-height: 50px;
				text-align: left;

				.search {}

				.button-add {
					margin-left: 200px;
				}
			}

			.table-user {
				width: 100%;
				height: 450px;
				font-size: 16px;

			}

			.table-footer {
				height: 40px;
			}

		}

	}
</style>
